<template>
  <div class="settle-review-detail-container">
    <div class="title">复核信息</div>
    <div class="tips"><el-button plain size="medium" type="primary" @click="backList">返回</el-button></div>
    <el-form class="formData" label-position="left" label-width="110px" :model="formData" ref="formData">
      <el-form-item label="申请原因:" prop="remark">
        <el-input :disabled="!viewInfo" type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="formData.remark"></el-input>
      </el-form-item>
      <el-form-item label="申请复核金额:" label-width="110px" prop="">
        <el-button :disabled="true">{{ reviewAmount }}</el-button>
      </el-form-item>

      <el-form-item label="申请明细:" label-width="110px" prop="applyDetailList"></el-form-item>
      <el-table :data="formData.applyDetailList" style="width: 100%" border>
        <el-table-column label="订单号" prop="orderNo"></el-table-column>
        <el-table-column label="商品名称" prop="goodsName"></el-table-column>
        <el-table-column label="货号" prop="goodsSn"></el-table-column>
        <el-table-column label="商品SKU编码" prop="merSkuNo"></el-table-column>
        <el-table-column label="平台SKU编码" prop="skuCode"></el-table-column>
        <el-table-column label="数量" prop="goodsNumber" width="50"></el-table-column>
        <el-table-column label="原供货单价" prop="originalSupplyAmount"></el-table-column>
        <el-table-column label="原供货金额">
          <template slot-scope="scope">{{ scope.row.goodsNumber * scope.row.originalSupplyAmount }}</template>
        </el-table-column>
        <el-table-column label="调整后供货价单价" prop="adjustSupplyPrice" min-width="120">
        </el-table-column>
        <el-table-column label="调整后供货金额">
          <template v-if="scope.row.adjustSupplyPrice" slot-scope="scope">{{ scope.row.goodsNumber * scope.row.adjustSupplyPrice }}</template>
        </el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
import { settleReviewDetail } from '@/api/merchantsys/settle'
export default {
  name: 'reviewDetail',
  data() {
    return {
      showGoodsList: false,
      loading: false,
      formData: {
        accountId: null,
        merchantId: null,
        settleNo: null,
        remark: null,
        applyDetailList: []
      },
      listLoading: false,
      listTotal: 0,
      reviewList: [],
      selectReviewList: []
    }
  },
  computed: {
    reviewAmount() {
      if (this.formData.applyDetailList.length < 1) {
        return '系统自动生成'
      }
      return this.formData.applyDetailList.reduce(
        (sum, item) => sum + ((item.adjustSupplyPrice ? item.adjustSupplyPrice : item.originalSupplyAmount) - item.originalSupplyAmount) * item.goodsNumber,
        0
      )
    },
    viewInfo() {
      return this.formData.auditStatus != 1 && this.formData.auditStatus != 2
    }
  },
  created() {
    this.loadDetail()
  },
  methods: {
    loadDetail() {
      const settleNo = this.$route.params.settleNo
      settleReviewDetail({ settle_no: settleNo }).then(res=>{
        this.formData = res.data
      })
    },
    backList() {
      this.$router.push({ path: '/settle/review/list' })
    }
  }
}
</script>

<style lang="scss" scoped>
.settle-review-detail-container{
  padding: 20px;
  .title{
    font-weight: bold;
    margin-bottom: 20px;
  }
  .tips{
    color: gray;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .el-form-item__label {
    text-align: right;
  }
  .el-dialog {
    max-width: 70%;
    .dialog-btn{
      text-align: center;
      margin-top: 20px;
    }
  }
  .formData{
    .el-form-item__content{
      margin-left: 0px !important;
    }
  }
  .el-table__row{
    .cell{
      text-align: center;
    }
  }
  .has-gutter{
    .cell{
      text-align: center;
    }
  }
}
</style>
